<template>
    <div class="rank-list-wrapper">
      <div class="rank-list-header">
        <div class="rank-list-head">{{integral}}</div>
      </div>
      <div class="rank-list-container">
        <div class="rank-list clearfix">
          <span class="fl">{{rank}}</span>
          <div class="rank-list-center fl">
            <div class="center-image fl">
              <img :src="userPortrait">
            </div>
            <div class="center-name fl">{{userName}}</div>
          </div>
          <div class="rank-list-right fr">{{integral}}</div>
        </div>
        <div class="rank-line"></div>
        <div class="rank-list">
          <ul>
            <li class="clearfix" v-for="(item,index) in rankList" :key="index">
              <div class="rank-list-left fl">
                <label>{{index < 3 ? '': index+1}}</label>
              </div>
              <div class="rank-list-center fl">
                <div class="center-image fl">
                  <img :src="item.avatar ? item.avatar : '/static/images/user-portrait-default.png'">
                </div>
                <div class="center-name fl">{{item.nickname}}</div>
              </div>
              <div class="rank-list-right fr">{{item.integer}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import Cookie from 'js-cookie'

    export default {
        name: "RankList",
        data() {
          return {
            rankList:[],
            integral:0,
            rank:0,
            userInfo:null,
            userPortrait:'',
            userName:''
          }
        },
        mounted(){
          this.getRankListData()
          this.userInfo = JSON.parse(Cookie.get('userInfo'))
          this.userPortrait = this.userInfo.avatar ? this.userInfo.avatar : '/static/images/user-portrait-default.png'
          this.userName = this.userInfo.nickname ? this.userInfo.nickname : this.userInfo.phone
          this.integral = Cookie.get('integral')
        },
        methods:{
          getRankListData(){
            ajax.doAction({
              url: '/user/leaderboard',
              type: 'POST',
              successCallback: (data) => {
                // console.log(data)
                let datas = data.data
                this.rankList = datas.memberList
                this.rank = datas.rank
              },
              errorCallback: (data) => {
                console.log('请求失败')
              }
            })
          }
        }
    }
</script>

<style>
.rank-list-wrapper .rank-list-header{
  background: url('/static/images/my-task-bg.png') no-repeat center;
  width: 100%;
  height: 130px;
  background-size: 100% 100%;
  position: relative;
}
.rank-list-wrapper .rank-list-head{
  color: #fff;
  font-size: 50px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.rank-list-wrapper .rank-list-container .rank-list{
  font-size: 18px;
  padding:12px;
  line-height: 30px;
  color: #333;
}
.rank-list-wrapper .rank-list span{
  width: 15%;
  text-align: center;
}
.rank-list-wrapper .rank-list .rank-list-center{
  margin:0 8px
}
.rank-list-wrapper .rank-list .center-image{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.rank-list-wrapper .rank-list .center-name{
  margin-left: 5px;
}
.rank-list-wrapper .rank-line{
  width:100%;
  height: 3px;
  background: #f4f4f4;
}
.rank-list-wrapper .rank-list .rank-list-left{
  width: 15%;
  text-align: center;
}
.rank-list-wrapper .rank-list li{
  padding: 12px 0;
}
.rank-list-wrapper .rank-list li label{
  display: block;
  margin: 0 auto;
}
.rank-list-wrapper .rank-list li:nth-of-type(1) label{
  background: url("/static/images/rank-first-icon.png") no-repeat center;
  width: 22px;
  height: 26px;
  background-size: 100% 100%;
}
.rank-list-wrapper .rank-list li:nth-of-type(2) label{
  background: url("/static/images/rank-second-icon.png") no-repeat center;
  width: 22px;
  height: 26px;
  background-size: 100% 100%;
}
.rank-list-wrapper .rank-list li:nth-of-type(3) label{
  background: url("/static/images/rank-third-icon.png") no-repeat center;
  width: 22px;
  height: 26px;
  background-size: 100% 100%;
}
</style>
